<template>
	<view class="uni-forms-item">
		<view class="label">{{ label }}</view>
		<view class="content">
			<slot></slot>
		</view>
		<view class="error-message" v-if="errorMessage">{{ errorMessage }}</view>
	</view>
</template>

<script>
	export default {
		name: "uni-forms-item",
		props: {
			label: {
				type: String,
				default: ""
			},
			name: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				errorMessage: ""
			};
		},
		inject: ["uniForms"],
		mounted() {
			if (this.uniForms) {
				this.uniForms.addItem(this);
			}
		},
		beforeDestroy() {
			if (this.uniForms) {
				this.uniForms.removeItem(this);
			}
		},
		methods: {
			// 设置错误信息
			setError(message) {
				this.errorMessage = message;
			},
			// 清除错误信息
			clearError() {
				this.errorMessage = "";
			}
		}
	};
</script>

<style scoped>
	.uni-forms-item {
		margin-bottom: 20rpx;
	}

	.label {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.content {
		width: 100%;
	}

	.error-message {
		font-size: 24rpx;
		color: #ff0000;
		margin-top: 10rpx;
	}
</style>